<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">
<head>
<title>shoppingcart.com - O melhor e-commerce do mundo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/jquery.ui.css" type="text/css" />
<link href="css/style-client-index.css" rel="stylesheet" type="text/css" />
<link href="css/style-admin-index.css" rel="stylesheet" type="text/css" />
<link href="css/style-dropdown.css" rel="stylesheet" type="text/css" media="screen, projection" />
<script type="text/javascript" src="js/jquery-cycle.js"></script>
<script type="text/javascript" src="js/banner-index.js"></script>
<script type="text/javascript" src="js/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script> 
</head>
<body>
<h:form>
	<div>
		<div id="base">
        	<div class="header">
        		<h:commandLink value="" action="#{bbProduct.getAllProducts}" >
            		<h:graphicImage value="Imagens/logo.png" id="logo" styleClass="logo" />
                </h:commandLink>
                <div class="box">
                	<div id="part-1">
                    	<dl class="dl-style">
                        	<dt>
                            	<h:graphicImage value="Imagens/arrow.png" />
                                	<h:outputLink value="#" class="options">Seja Nosso Fornecedor</h:outputLink>
                                    <br />
                            </dt>
                            <dt>
                            	<h:graphicImage value="Imagens/arrow.png" />
                                	<h:outputLink value="#" class="options">Sobre Nós</h:outputLink>
                                    <br />
                            </dt>
                            <dt>
                            	<h:graphicImage value="Imagens/arrow.png" />
                                	<h:outputLink value="#" class="options">Plano de Fidelidade</h:outputLink>
                                    <br />
                            </dt>
                        </dl>
                    </div>
                    <div id="part-2">
                    	<dl class="dl-style">
                        	<dt>
                            	<h:graphicImage value="Imagens/arrow.png" /> 
                                <h:outputLink value="#" class="options">Crie sua Conta!</h:outputLink>
                                <br />
                            </dt>
                            <dt>
                            	<h:graphicImage value="Imagens/arrow.png" /> 
                                	<f:subview>
                                    	<rich:modalPanel id="panel" width="350" height="100">
                                        	<f:facet name="header">
                                            	<h:panelGroup>
                                                	<h:outputText value="Login"></h:outputText>
                                                </h:panelGroup>
                                            </f:facet>
                                            <f:facet name="controls">
                                            	<h:panelGroup>
                                                	<h:graphicImage value="/Imagens/close.png" styleClass="hidelink" id="hidelink" />
                                                    <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick" />
                                                </h:panelGroup>
                                            </f:facet>
                                            <h:panelGrid columns="2" style="margin:auto;">
                                            	<h:outputText value="Login: " />
                                                <h:inputText value="#{bbClient.client.login}" />
                                                <h:outputText value="Senha: " />
                                                <h:inputSecret value="#{bbClient.client.password}" />
                                                <h:inputHidden value="null" />
                                                <h:commandButton id="submit" actionListener="#{bbClient.logar}" value="Enviar">
                                                	<rich:componentControl for="panel" attachTo="submit" operation="hide" event="onclick" />
                                                </h:commandButton>
                                            </h:panelGrid>
                                        </rich:modalPanel>
                                        <h:outputLink id="link" value="#" class="options">
                                        <h:outputText value="Entrar no Site" />
                                            <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick" />
                                        </h:outputLink>
                                    </f:subview>
                                    <br />
                                </dt>
                                <dt>
                                	<h:graphicImage value="Imagens/arrow.png" /> 
                                    <h:outputLink value="#" class="options">Busca Avançada</h:outputLink> 
                                    <br />
                                </dt>
                            </dl>
                        </div>
                        <div id="part-3"><h:graphicImage value="Imagens/sc.png" styleClass="sc" border="0" />
                        	<f:subview>
								<rich:modalPanel id="cart" width="800" height="300">
                                	<f:facet name="header">
                                    	<h:panelGroup>
                                        	<h:outputText value="Meu Carrinho"></h:outputText>
                                        </h:panelGroup>
                                    </f:facet>
                                    <f:facet name="controls">
                                    	<h:panelGroup>
                                        	<h:graphicImage value="/Imagens/close.png" styleClass="hidelink" id="hidelink" />
                                            <rich:componentControl for="cart" attachTo="hidelink" operation="hide" event="onclick" />
                                        </h:panelGroup>
                                    </f:facet>
                                    <h:panelGrid columns="2" style="margin:auto;">
                                     <rich:scrollableDataTable width="700px" height="185px" id="tabelaCarrinho" rows="8" value="#{bbItem.itens}" var="item" >
                                    	<!--  <rich:dataTable rows="6" value="#{bbItem.itens}" var="item" id="tabelaCarrinho" width="700" styleClass="width-1">-->
								   			<rich:column styleClass="rich-column-width" width="292" sortBy="#{item.product.name}">
				                       			<f:facet name="header">
				                       				<h:outputText value="Nome" />
				                       			</f:facet>
				                        		<h:outputText value="#{item.product.name}" />
				                   			</rich:column>
				                   			<rich:column styleClass="rich-column-width" width="100">
				                       			<f:facet name="header">
				                       				<h:outputText value="Preço" />
				                       			</f:facet>
				                        		<h:outputText value="#{item.product.price}">
				                        			<f:convertNumber type="number" minFractionDigits="2" maxFractionDigits="2"/>
				                        		</h:outputText>
				                   			</rich:column>				                   			
				                   			<rich:column styleClass="rich-column-width" width="100">
				                       			<f:facet name="header">
				                       				<h:outputText value="Quantidade" />
				                       			</f:facet>
				                        		<h:outputText value="#{item.quantity}" />
				                   			</rich:column>
				                   			<rich:column styleClass="rich-column-width" width="100">
				                       			<f:facet name="header">
				                       				<h:outputText value="SubTotal" />
				                       			</f:facet>
				                        		R$ <h:outputText value="#{item.product.price * item.quantity}" >
				                        			<f:convertNumber type="number" minFractionDigits="2" maxFractionDigits="2"/>
				                        		</h:outputText>
				                   			</rich:column>
				                   			<rich:column colspan="2" width="100">         
				                   				<f:facet name="header">
				                   					<h:outputText value="Ações" />
				                   				</f:facet>
				                   				<h:commandLink action="edit" id="edit">
				                   					<a4j:commandLink action="#{bbItem.removeCarrinho}" reRender="tabelaCarrinho,tot">
                   										<h:graphicImage value="/Imagens/delete.png" styleClass="border-null" style="border:0"/>
                   											<f:setPropertyActionListener target="#{bbItem.item}" value="#{item}" />
                   									</a4j:commandLink>             			
				                   				</h:commandLink>				           
				                   			</rich:column>
				                   			</rich:scrollableDataTable> 
								<!-- </rich:dataTable>-->
                                    </h:panelGrid>
                                     <div style="width: 200px; height: 50px; float:left; background-color:green; color:#fff; margin-top: 20px; margin-left: 300px;">                                    	
                                    	<h:outputText style="margin-top:15px;" value="Vai Pagar Com: " />
											<h:selectOneMenu style="margin-top:15px;" value="#{bbSale.sale.card}" id="carde">
													<f:selectItems id="cd" value="#{bbCard.itemsCards}" />
													<f:converter converterId="SelectItemConveterToObject" />
											</h:selectOneMenu>	                                	
                                    </div>
                                    <div style="width: 200px; height: 50px; float:left; background-color:green; color:#fff; margin-top: 20px; margin-left: 40px;">                                    	
                                    		<div style="font-size:20px;">
                                    			Total:R$ <h:outputText id="tot" value="#{bbItem.total}">
                                    			<f:convertNumber type="number" minFractionDigits="2" maxFractionDigits="2"/>  
                                    		</h:outputText> 
                                    		</div>
                                    		<div>
                                    			 <h:commandButton id="comprar" value="Comprar" action="#{bbSale.vender}" >
                                    			 	<rich:componentControl for="cart" attachTo="comprar" operation="hide" event="onclick" />
                                    			 </h:commandButton>    
                                    		</div>                                 	
                                    </div>                                    
                                </rich:modalPanel>
                            </f:subview> 
                            <h:outputLink value="#" id="shopcart" class="options">
                            	<div id="sc-1">
                            		<h:outputText value="Shopping" />
                            		<br />
                            		<h:outputText value="Cart" />
                            	</div>
                                <rich:componentControl for="cart" attachTo="shopcart" operation="show" event="onclick" />
                            </h:outputLink>
                            <h:outputText binding="#{bbClient.outputQuantidade}" rendered="false" value="Quantidade: #{bbItem.totalCarrinho}" />
                        </div>
                        <div style="margin-left: 250px">
                        	<h:outputText binding="#{bbClient.outputBemVindo}" rendered="#{not empty bbClient.client.name}" value="Bem Vindo, #{bbClient.client.name} - " />
                        	<h:commandLink binding="#{bbClient.commandSair}" rendered="false" action="#{bbClient.logoff}" value="Sair" />
                        </div>    
                    </div>                       
                    <div id="listagem" class="search-bar">
                    	<div id="dpt-bar">
                        	<div id="text-style-2">
                            	<ul class="dropdown">
                                	<li>Veja todos os<br />Departamentos
                                    	<ul style="width: 610px; z-index: 100; -moz-border-radius: 10px;">
                                        	<div id="sub-categoria" style="float: left; text-align: center;">
                                            	<span class="category">Categorias</span><br />
                                                <rich:dataGrid id="grid-template" value="#{bbCategory.categories}" border="0" style="background-color:#060; border-color:#060;" var="cat" columns="5" width="610px">
                                                	<h:commandLink action="#{bbProduct.listarPorCategory}" value="#{cat.name}">
                                                		<f:setPropertyActionListener value="#{cat}" target="#{bbCategory.category}" />
                                                	</h:commandLink>
                                                </rich:dataGrid>
                                            </div>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="meuproprioid">Pesquisar por: <input type="text" size="60px" style="font-size: 8pt;" /> em 
                        	<select style="font-size: 8pt;">
                            	<option>Todos os Departamentos</option>
                                <option>Suplementos e Vitaminas</option>
                                <option>A text really very very large</option>
                            </select> 
                            <input type="submit" value="ok" />
                        </div>
                    </div>
                <ui:insert name="shopBody">Shop Body</ui:insert>
                <div id="about">
                	<div id="text-style-3">Informações Adicionais sobre ShoppingCart.com</div>
                </div>
                <div id="infos"><br />
                	<table cellspacing="10" style="margin: auto;">
                    	<tr style="text-align: center;">
                        	<td colspan="4"><strong>FORMAS DE PAGAMENTO</strong></td>
                        </tr>
                        <tr></tr>
                        <tr>
                        	<td>Cartões de crédito</td>
                            <td>Cartões de Débito</td>
                            <td>Débito em Conta</td>
                            <td>Boleto Bancário</td>
                        </tr>
                        <tr style="text-align: center;">
                        	<td>
                            	<img src="Imagens/ico_visa.gif" />
                                <img src="Imagens/ico_master.gif" /><img src="Imagens/ico_amaerica.gif" />
                                <img src="Imagens/ico_diner.gif" /><img src="Imagens/ico_aura.gif" />
                            </td>
                            <td>
                            	<img src="Imagens/ico_visa.gif" />
                            </td>
                            <td>
                            	<img src="Imagens/ico_itau.gif" />
                                <img src="Imagens/ico_bradesco.gif" />
                                <img src="Imagens/ico_unibanco.gif" />
                                <img src="Imagens/ico_brasil.gif" />
                            </td>
                            <td>
                            	<img src="Imagens/ico_boleto.gif" />
                            </td>
                        </tr>
                        <tr style="text-align: center;">
                        	<td colspan="2">
                            	<img src="Imagens/internetSegura.gif" />
                            </td>
                            <td colspan="2">
                            	<img src="Imagens/site_seguro.gif" />
                            </td>
                        </tr>
                    </table>
                </div>
			</div>
		</div>
	</div>
</h:form>
</body>
</html>
